import React, { useState, useEffect, useRef } from 'react';
import moment from 'moment';
import dayjs from 'dayjs';
import {
  Badge,
  Button,
  Dropdown,
  Menu,
  message,
  Table,
  Card,
  Spin,
  Tooltip,
  Drawer,
} from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { DatePicker, Form, Input, Modal, Space } from 'antd';
const { RangePicker } = DatePicker;
export default () => { 
  const [addForm] = Form.useForm();
 
  const [addPlanDrawer, setAddPlanDrawer] = useState(false); 
 
  const [selectKeys, setSelectKeys] = useState([]);  
 
 
  //关闭新增计划modal
  const onCloseAddDrawer = () => {
    setAddPlanDrawer(false);
  };
 
 
 
 
  // 新增计划功能

  const onFinish = async (values: any) => {
    // console.log('Received values of form:', values);
    if (selectKeys.length > 0) {
      if (values.configList && values.configList.length > 0) {
        const taskArr = {};
        values?.users?.forEach((item) => {
          taskArr[item.first] = item.last;
        });
        const thisObj = {
          planName: values.planName,
          jobSetId: 1,
          startTime: moment(moment(values.dateRange[0]).format('YYYY-MM-DD HH:mm:00')).valueOf(),
          endTime: moment(moment(values.dateRange[1]).format('YYYY-MM-DD HH:mm:00')).valueOf(),
          jobIdList: selectKeys,
          triggerConfigList: values?.configList?.map((item) => ({
            triggerTime: moment(moment(item.first).format('YYYY-MM-DD HH:mm:00')).valueOf(),
            triggerDescription: item.last,
          })),
          taskEnv: taskArr,
        };
        // console.log('thisObj', thisObj);

         
         
          message.success('创建成功！');
          addForm.resetFields();
          setSelectKeys([]);
        
          onCloseAddDrawer();
       
      } else {
        message.warning('请添加批次执行配置！');
      }
    } else {
      message.error('请选择圈选任务！');
    }
  };
 
  

  return (
    <div style={{ backgroundColor: 'white', padding: '24px' }}>
      
      
      <Form
          form={addForm}
          name="dynamic_form_nest_item"
          initialValues={{ configList: [{ key: 1, name: 'first' }] }}
          onFinish={onFinish}
          autoComplete="off"
        >
          
          
          
          <Form.List name="users"
          
          >
            {(fields, { add, remove }) => (
              <>
                {fields.map(({ key, name, ...restField }) => (
                  <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                    <Form.Item
                      {...restField}
                      name={[name, 'first']}
                      rules={[{ required: true, message: '请输入环境变量key' }]}
                    >
                      <Input placeholder="环境变量key" />
                    </Form.Item>
                    <Form.Item
                      {...restField}
                      name={[name, 'last']}
                      rules={[{ required: true, message: '请输入环境变量value' }]}
                    >
                      <Input placeholder="环境变量value" />
                    </Form.Item>
                    <MinusCircleOutlined onClick={() => remove(name)} />
                  </Space>
                ))}
                <Form.Item>
                  <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                    新增一项
                  </Button>
                </Form.Item>
              </>
            )}
          </Form.List>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
       
       
    
    </div>
  );
};